<template>
	<div class="question-main">
		<div class="question-title" >
			{{qIndex+1}}.
			<span v-html="question.questionStem"></span>
		</div>
		<div class="question-item" v-for="(subQuestion,index) in question.subQuestionList" :question="subQuestion" >
			<div class="question-container-main">
				<single-question :qIndex="index" v-if="subQuestion.questionType == 2" :question="subQuestion" :showComplex="showComplex">
				</single-question>
				<award-winning-question :qIndex="index" v-else-if="subQuestion.questionType == 4" :question="subQuestion" :showComplex="showComplex"
					@userScoreInput="userScoreInput" :showUserAnswer="showUserAnswer" @commentInput="commentInput">
				</award-winning-question>
			</div>
			<slot name="sub-footer" :sIndex="index" :subQuestion="subQuestion">
				
			</slot>
		</div>
	</div>
</template>

<script>
	import SingleQuestion from "./SingleQuestion.vue";
	import AwardWinningQuestion from "./AwardWinningQuestion.vue";
	import {complexList} from "@/common/question.js";
	export default{
		name:"MaterialQuestion",
		components:{
			"single-question":SingleQuestion,
			"award-winning-question":AwardWinningQuestion
		},
		props:{
			question:{
				type:Object,
				require:true
			},
			showComplex:{
				type:Boolean,
				default:true
			},
			qIndex:{
				type:Number
			},
			showUserAnswer:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				complexList:complexList
			}
		},
		methods:{
			delQuestion(index){
				this.$emit("delSubQuestion",this.question,index);
			},
			moveUp(index){
				this.$emit("moveSubUp",this.question,index);
			},
			moveDown(index){
				this.$emit("moveSubDown",this.question,index);
			},
			scoreSubChange(subQuestion,score,index){
				this.$emit("scoreSubChange",this.question,score,index);
			},
			userScoreInput(index){
				//问答题打分
				this.$emit("subUserScoreInput",this.question,index);
			},
			commentInput(index){
				//问答题评论
				this.$emit("subCommentInput",this.question,index);
			},
			
		}
	}
</script>

<style scoped="scoped" lang="scss">
		
	.question-main{
		width: 100%;
		box-sizing: border-box;
		@include flex-column(flex-start, flex-start);
		min-height: 100px;
		.question-item{
			width: 100%;
			min-height: 100px;
			background: #FFFFFF;
			border: 1px solid #EBEEF6;
			box-sizing: border-box;
			box-sizing: border-box;
			margin-top: 16px;
			@include flex-column(flex-start, flex-start);
			.question-container-main{
				@include flex-row(flex-start, flex-start);
				width: 100%;
				box-sizing: border-box;
				padding: 16px;
			}
		}
		.question-title{
			color: #666666;
		}
		.options-list{
			@include flex-column(flex-start, flex-start);
			.options-item{
				@include flex-row(flex-start, flex-start);
				.options-item-title{
					color: #666666;
				}
				.options-item-main{
					line-height: 20px;
					color: #666666;
					margin: 0 8px;
				}
				margin-top: 16px;
			}
		}
		.question-info-title{
			width: 80px;
			color: #666666;
		}
		.question-info-main{
			flex: 1;
			line-height: 20px;
			color: #666666;
		}
		.question-info{
			width: 100%;
			border-top: 1px solid #EBEEF6;
			padding-top: 16px;
			margin-top: 16px;
			min-height: 40px;
			@include flex-row(flex-start, center);
		}
		
	}
</style>
